import React from 'react'
import {Link} from 'react-router-dom'

class View extends React.Component{
    constructor() {
        super();
        this.state = {
            username: '',
            password: ''
        }
        this.getValue = this.getValue.bind(this);
    }

    getValue(event) {
        let {name,value} = event.target;
        this.setState({
            [name]: value
        })
    }
    

    render() {
        let {login} = this.props;
        let {username,password} = this.state;
        return (
             <div className="login">
                 <header className="header bg-fff flex aic jc-sb pl-15 pr-15">
                    <Link to="/my" className="flex aic">
                        <img style={{height:'25px'}} src={require('../../assest/img/arrow-left.png')}/>
                        <span className="">返回</span>
                    </Link>
                    <div className="fcc">登录</div>
                    <div></div>
                 </header>
                <p className="bg-fff input-box aic flex mt-10 bdb"> 
                    <span>用户名</span>
                    <input className="input bg-fff ml-15 fg1" 
                    value={username} name="username" 
                    onChange={this.getValue}
                    placeholder="请输入用户名"
                    />
                </p>
                <p className="bg-fff input-box aic flex"> 
                    <span>密码</span>
                    <input className="input bg-fff ml-15 fg1"
                    value={password} name="password"
                    onChange={this.getValue}
                    placeholder="请输入密码"
                    />
                </p>
            
                <p className="fcc" style={{marginTop:'100px'}}>
                    <button className="button" onClick={()=> {login({username,password})}}> 立即登录</button>
                </p>
            </div>
        )
    }
}

export default View;